<template>
    <div v-if="isShow">
        

        <div v-if="!isDetail">
            <h3>下注历史概要</h3>
            <div class="flexbox spacebetween">
                <div>
                    <span>游戏：</span>
                    <select @change="selchange" style="height: 26px;">
                        <option v-for="(item,index) in gamelist" :value="item.value" :selected="item.name == game">{{item.name}}</option>
                    </select>
                </div>
                <p style="cursor: pointer;color: red;" @click="refreshFun"><img src="../../../../assets/images/refresh.png" style="width: 18px;height: 18px;vertical-align:sub;margin-right: 3px;" />刷新</p>
            </div>
            <div style="margin-top: 18px;">
                <h4>本周</h4>
                <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
                    <tr class="t_list_caption">
                        <td>日期</td>
                        <td>投注额</td>
                        <td>派彩结果</td>
                        <td>注数</td>
                    </tr>
                    <tr class="t_td_text" v-for="(item,index) in infoData.thisWeek" :key="index">
                        <td :style="item.count != 0 ? 'cursor: pointer;font-weight: bold;':''" @click="goDetailFun(item.count,item.day)">{{item.day}}</td>
                        <td>{{item.sumV}}</td>
                        <td>{{item.sumF.toFixed(1)}}</td>
                        <td>{{item.count}}</td>
                    </tr>
                    <tr style="background: bisque;height: 26px;">
                        <td>总计：</td>
                        <td>{{totalMarks(infoData.thisWeek,'sumV')}}</td>
                        <td>{{totalMarks(infoData.thisWeek,'sumF').toFixed(1)}}</td>
                        <td>{{totalMarks(infoData.thisWeek,'count')}}</td>
                    </tr>
                </table>
            </div>
            <div style="margin-top: 18px;">
                <h4>上周</h4>
                <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
                    <tr class="t_list_caption">
                        <td>日期</td>
                        <td>投注额</td>
                        <td>派彩结果</td>
                        <td>注数</td>
                    </tr>
                    <tr class="t_td_text" v-for="(item,index) in infoData.lastWeek" :key="index">
                        <td>{{item.day}}</td>
                        <td>{{item.sumV}}</td>
                        <td>{{item.sumF.toFixed(1)}}</td>
                        <td>{{item.count}}</td>
                    </tr>
                    <tr style="background: bisque;height: 26px;">
                        <td>总计：</td>
                        <td>{{totalMarks(infoData.lastWeek,'sumV')}}</td>
                        <td>{{totalMarks(infoData.lastWeek,'sumF').toFixed(1)}}</td>
                        <td>{{totalMarks(infoData.lastWeek,'count')}}</td>
                    </tr>
                </table>
            </div>
        </div>

        <div v-if="isDetail">
            <h3>下注历史详情</h3>
            <div class="flexbox spacebetween">
                <p  style="cursor: pointer;color: red;" @click="isDetail = !isDetail">返回</p>
                <div>
                    <span>页数：</span>
                    <select @change="selDetchange" style="height: 26px;">
                        <option v-for="(item,index) in detinfoData.pages" :key="index" :value="item">{{item}}</option>
                    </select>
                    <span> / {{detinfoData.pages}} 页 共 {{detinfoData.total}} 条记录</span>
                </div>
            </div>
            <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
                <tr class="t_list_caption">
                    <td>编号</td>
                    <td>注单号/投注日期</td>
                    <td>投注类型</td>
                    <td>内容</td>
                    <td>投注额</td>
                    <td>可赢金额</td>
                    <td>派彩</td>
                    <td>注单状态</td>
                </tr>
                <tr class="t_td_text" v-for="(item,index) in detinfoData.list" :key="index">
                    <td>{{index+1}}</td>
                    <td style="padding: 2px 0px;">{{item.orderID}}<br/>{{item.datetime}}</td>
                    <td>{{item.game}}<br/>{{item.period}}期</td>
                    <td><span class="colorRed bolds" style="font-size: 12px;">{{item.title}}</span> @ <span class="colorRed bolds" style="font-size: 12px;">{{item.rate}}</span><br/><span v-if="item.balls.length != 0" style="font-size: 13px;">[ {{item.balls.join('，')}} ]</span></td>
                    <td>{{item.member.value}}</td>
                    <td>{{item.member.wValue.toFixed(1)}}</td>
                    <td :style="item.member.fValue > 0 ? 'color:red;':'color: green;'">{{item.member.fValue.toFixed(1)}}</td>
                    <td>{{item.status == 1? '已结算':'未结算'}}</td>
                </tr>
                <tr style="background: bisque;height: 26px;">
                    <td colspan="4" style="text-align: right;">此页面统计：</td>
                    <td>{{detinfoData.sum.current.sumV.toFixed(1)}}</td>
                    <td>{{detinfoData.sum.current.sumW.toFixed(1)}}</td>
                    <td>{{detinfoData.sum.current.sumF.toFixed(1)}}</td>
                    <td></td>
                </tr>
                <tr style="background: bisque;height: 26px;">
                    <td colspan="4" style="text-align: right;">总计：</td>
                    <td>{{detinfoData.sum.total.sumV.toFixed(1)}}</td>
                    <td>{{detinfoData.sum.total.sumW.toFixed(1)}}</td>
                    <td>{{detinfoData.sum.total.sumF.toFixed(1)}}</td>
                    <td></td>
                </tr>
            </table>
        </div>
        
    </div>
</template>
<script>

    import axios from 'axios'
    import {lotterytype} from '../../../../assets/js/lotterytype.js'

    export default {
        name: "BetHistory",
        props: {  //普通类型：String、Number、Boolean、Null    引用类型： Array、Object
            // openBet: {  //可下注
            //     type: Boolean,
            //     required: true
            // },
            // ninetime: {  //90s
            //     type: Boolean,
            //     required: true
            // },
        },
        data(){
            return{
                infoData: {},
                game: '',  //游戏
                gamelist: [
                    {name: '全部' , value: '0'},
                    {name: 'PC蛋蛋' , value: 'PC蛋蛋'},
                    {name: '六合彩' , value: '六合彩'},
                    {name: '北京PK拾' , value: '北京PK拾'},
                    {name: '北京快乐8' , value: '北京快乐8'},
                    {name: '天津时时彩' , value: '天津时时彩'},
                    {name: '安徽快3' , value: '安徽快3'},
                    {name: '山东11选5' , value: '山东11选5'},
                    {name: '幸运飞艇' , value: '幸运飞艇'},
                    {name: '广东11选5' , value: '广东11选5'},
                    {name: '广东快乐十分' , value: '广东快乐十分'},
                    {name: '新疆时时彩' , value: '新疆时时彩'},
                    {name: '江苏快3' , value: '江苏快3'},
                    {name: '江苏11选5' , value: '江苏11选5'},
                    {name: '重庆幸运农场' , value: '重庆幸运农场'},
                    {name: '重庆时时彩' , value: '重庆时时彩'},
                ],
                params: '',
                isShow: false,
                isDetail: false,
                pagedet: 1,  //详情页码
                detinfoData: {},
                day: '',
            }
        },
        computed: {
            //计算总和
            totalMarks: function (arr,val){
                return function (arr,val) {
                    let total = 0;
                    let _this = this;
                    for(let i = 0; i<arr.length; i++){
                        total += parseFloat(arr[i][val]);
                    }
                    return total;
                }
                
                
            },
        },
        methods: {
            paramsFun(){
                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);
                this.game = this.params.nowlottery;
            },
            init(){

                var _this = this;

                this.$httpGet('/api/wager/summary/'+ this.game).then(response => {
                        
                    if(response.status == 200){
                        _this.infoData = response.data;
                        _this.isShow = true;
                    }

                });

            },
            //刷新
            refreshFun(){
                this.init();  //
            },
            //切换游戏
            selchange(event){
                
                this.game = event.target.value;
                // console.log(this.game);
                this.init();
            },
            selDetchange(event){
                this.pagedet = event.target.value;
                this.details();
            },
            //点击查看详情
            goDetailFun(count,day){
                if(count != 0){
                    
                    this.day = day;
                    this.details();
                    
                }
            },
            details(){
                var _this = this;

                this.$httpGet('/api/wager/summary/detail/'+ this.game + '/' + this.day,{
                    page: _this.pagedet
                }).then(response => {
                    // console.log(response);
                    if(response.status == 200){
                        _this.detinfoData = response.data;
                        this.isDetail = true;
                    }

                });
            },
            
        },
        mounted(){
            this.paramsFun();
            this.init();
        },
        watch: {
            openBet: function(now,old){
                // console.log(now,old);
                //开奖  刷新路珠数据
                this.init();
                
            },
            ninetime: function(now,old){
                console.log('------------90s  账户信息');
                //90s  刷新数据
                this.init();
            },

        },
    }
</script>
